<template>
    <div class="roleManage-wrapper">
        <div class="flex-row">
            <div class="flex_side">
                <a-card :bordered="false">
                    <div slot="title" class="flex user_header">
                        <h3 class="title">角色列表</h3>
                        <a-button
                            type="primary"
                            icon="plus"
                            class="select-bottom"
                            :disabled="hasPerm(['sys:role:add'])"
                            @click="addInfo()"
                            >添加</a-button
                        >
                    </div>
                    <div class="side_search">
                        <a-input-search
                            v-model="form.roleName"
                            placeholder="请输入搜索"
                            allowClear
                            enter-button
                            @search="search"
                        />
                    </div>
                    <div class="side_box flex-column">
                        <a-spin v-if="loading" style="margin-top:30px;" />
                        <template v-else>
                            <template v-if="list.length">
                                <template v-for="(item, index) in list">
                                    <div
                                        :class="['side_item', roleName == item.roleName && 'active']"
                                        :key="item.roleId"
                                        v-if="item.roleName!='superAdmin' || (item.roleName=='superAdmin' && accountInfo.roleName=='superAdmin')"
                                        @click="selectRole(item)"
                                    >
                                        <span class="name">{{ item.roleName }}</span>
                                        <a-button
                                            type="link"
                                            :disabled="hasPerm(['sys:role:update']) || (item.roleId == 1 && accountInfo.userId!=1)"
                                            @click.stop="addInfo(item)"
                                            icon="form"
                                        />
                                        <a-button
                                            type="link"
                                            :disabled="hasPerm(['sys:role:remove']) || item.roleId == 1"
                                            @click.stop="deleteInfo(item, index)"
                                            icon="delete"
                                        />
                                    </div>
                                </template>
                            </template>
                            <a-empty v-else />
                        </template>
                    </div>
                </a-card>
            </div>
            <div class="flex_list">
                <a-card :hoverable="true" :bordered="false">
                    <div slot="title" class="flex user_header">
                        <h3 class="title">用户列表</h3>
                        <!-- <a-button type="default" icon="plus" disabled class="select-bottom">
                            批量加入用户
                        </a-button> -->
                    </div>
                    <user-list ref="user" :params="{ roleName: roleName,userType:'' }"></user-list>
                </a-card>
            </div>
        </div>
        <template v-if="isShowInfo">
            <role-info @ok="submit" @cancel="isShowInfo = false" :info="itemInfo" />
        </template>
    </div>
</template>

<script>
import { remoteList, deleteInfo } from '@/api/system/role';
import RoleInfo from './components/info';
import UserList from '@/views/system/components/UserList';
import { mapState } from 'vuex';

export default {
    name: 'roleManage',
    components: { UserList, RoleInfo },
    data() {
        return {
            loading: false,
            form: {
                roleName: '',
                page: 1,
                size: 100
            },
            list: [],
            roleName: '',
            itemInfo: null,
            isShowInfo: false
        };
    },
    computed: {
        ...mapState({
            accountInfo: state => state.user.accountInfo
        })
    },
    created() {
        console.log(this.accountInfo)
        this.search();
    },
    methods: {
        //查询
        async search() {
            try {
                this.loading = true;
                this.list = [];
                let res = await remoteList(this.form);
                let { list, total } = res.data;
                this.list = list;
                this.total = total;
            } finally {
                this.loading = false;
            }
        },
        //新增 or 编辑
        addInfo(row = {}) {
            this.isShowInfo = true;
            this.itemInfo = { ...row };
        },
        //删除
        deleteInfo(item, index) {
            this.$confirm({
                title: '提示',
                content: '确定要删除该角色吗？',
                okText: '确定',
                cancelText: '取消',
                onOk: async () => {
                    try {
                        let res = await deleteInfo({ ids: [item.roleId] });
                        let { code } = res;
                        if (code == 200) {
                            this.$message.success('删除成功!');
                            this.list.splice(index, 1);
                        }
                        // this.search(1);
                    } catch (err) {}
                },
                onCancel() {}
            });
        },
        //信息编辑确认
        submit() {
            this.isShowInfo = false;
            this.search(1);
            this.$refs.user.search(1);
        },
        //选择角色名称
        selectRole(item) {
            this.roleName = item.roleName;
        }
    }
};
</script>
<style lang="scss" scoped>
.flex_side {
    margin-right: 25px;
    width: 260px;
    flex-shrink: 0;
    background: #fff;
    .side_box {
        margin-top: 15px;

        .side_item {
            display: flex;
            align-items: center;
            padding: 0 10px;
            margin: 2px 0;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: #666;
            border-radius: 4px;
            cursor: pointer;

            .name {
                flex: 1;
            }

            .icon {
                margin-left: 10px;
                font-size: 16px;
            }

            &:hover {
                color: #fff !important;
                background: rgba($color: $primary-color, $alpha: 0.7);
                .ant-btn-link{
                    color: #fff!important;
                }
            }

            &.active {
                color: #fff;
                background: $primary-color;
                .ant-btn-link{
                    color: #fff!important;
                }
            }
        }
    }
}

.user_header {
    width: 100%;
    align-items: center;

    .title {
        flex: 1;
    }
}

.flex_list {
    flex: 1;
    width: 0;
}
</style>
